<template>
  <div class="sdy-search">
    <Teleport to=".header">
      <header-com
        @searchBtnHandler="searchHandler"
        @searchChangeHandler="searchChangeHandler"></header-com>
    </Teleport>

    <!-- 搜索列表盒子 -->
    <ul v-if="listShow" class="search-list-box">
      <li
        v-for="item in searchList"
        :key="item.proid"
        @click="searchHandler(item.brand)">
        <span>{{ item.brand }}</span>
        <span>{{ item.category }}</span>
      </li>
    </ul>

    <!-- 最近搜索如果有 hidden 类名就可以隐藏 -->
    <div :class="{ 'hidden': !searchHistoryList.length,'box': true, 'search-history-box': true }">
      <div class="top">
        <p>最近搜索</p>
        <van-icon @click="clearHistoryHandler" name="delete-o" />
      </div>
      <ul class="bottom">
        <li @click="searchHandler(item)" v-for="item in searchHistoryList" :key="item">{{ item }}</li>
      </ul>
    </div>

    <div class="box search-hot-box">
      <div class="top">
        <p>热门搜索</p>
        <p @click="hotHidden = !hotHidden">隐藏</p>
      </div>
      <div class="bottom">
        <ul v-if="hotHidden">
          <li
            v-for="item in searchHotList"
            :key="item.wordid"
            @click="searchHandler(item.keyword)">{{ item.keyword || '暂时没有' }}</li>
        </ul>
        <p v-else>
          已隐藏搜索发现
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import HeaderCom from '@/components/header.vue'
import { ref, onMounted } from 'vue'
import { getSearchList, getSearchHotList } from '@/apis/goods'
import { useRouter } from 'vue-router'

interface ResponseInfo {
  code: string
  message: string
}

interface Goods {
  proid: string
  brand: string
  category: string
}

interface GoodsHot {
  keyword: string
  num: number
  wordid: string
}

const $router = useRouter()

// 准备一个变量, 表示热门搜索显示的是 列表 还是 隐藏
const hotHidden = ref<boolean>(true)

// 准备一个变量, 表示搜索列表盒子 显示 还是 隐藏
const listShow = ref<boolean>(false)

// 准备一个变量, 表示输入搜索列表
const searchList = ref<Goods[]>([])

// 准备一个变量, 表示热门搜索列表
const searchHotList = ref<GoodsHot[]>([])

// 准备一个变量, 表示搜索历史列表
const searchHistoryList = ref<string[]>([])

// 搜索的逻辑比较复杂(详见解释1)

// 在搜索框内输入内容
// 由子组件传递来的内容
const searchChangeHandler = async (text: string) => {
  // 判断 text 为空
  if (!text) {
    listShow.value = false
    return
  }

  // 替换关键字
  text = text.replace('\\', '')

  // 发送请求, 请求相关搜索关键字列表
  const res = await getSearchList(text)

  // 判断, 如果没有对应关键字的内容
  if ((res as unknown as ResponseInfo).code === '10002') {
    // 让搜索列表隐藏起来
    listShow.value = false
    return
  }

  searchList.value = res.data
  // 让搜索列表显示出来
  listShow.value = true
}

// 热门搜索
const getHotList = async () => {
  const res = await getSearchHotList()

  searchHotList.value = res.data
}

// 点击按钮(点击搜索列表内的每一个选项 点击热门搜索内内容 点击历史搜索内内容 点击搜索框边上的 搜索按钮)
const searchHandler = (keyword: string) => {
  // 向 searchChangeHandler 添加关键字
  searchHistoryList.value.unshift(keyword)

  // 要对搜索列表去重
  searchHistoryList.value = [...new Set(searchHistoryList.value)]

  // 把搜索的关键字内容存储到 localStorage 内
  window.localStorage.setItem('history', JSON.stringify(searchHistoryList.value))

  // 跳转路由
  $router.push('/list')
}

// 点击垃圾桶按钮
const clearHistoryHandler = () => {
  // 清空 searchHistoryList 数据
  searchHistoryList.value = []

  // 删除 localStorage 内的记录
  window.localStorage.removeItem('history')
}

onMounted(() => {
  getHotList()

  // 从 localStorage 内拿到内容赋值给 searchHistoryList
  searchHistoryList.value = JSON.parse(window.localStorage.getItem('history') || '[]') || []
})
</script>

<style lang="scss" scoped>
.sdy-search {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  padding-top: 30px;
  background-color: #fff;
  position: relative;

  > .search-list-box {
    width: 100%;
    position: absolute;
    left: 0;
    background-color: #fff;
    z-index: 999;
    margin: -30px -10px 0;

    > li {
      padding: 10px 20px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      height: 20px;

      :last-child {
        font-size: 12px;
        padding: 5px 10px;
        background-color: #F0F2F5;
        color: #686868;
      }
    }
  }

  > .box {
    width: 100%;
    margin-bottom: 20px;
    &.hidden {
      display: none;
    }

    > .top {
      display: flex;
      justify-content: space-between;
      height: 20px;
      align-items: center;

      p:last-child {
        font-size: 14px;
        color: #666;
      }
    }

    > .bottom {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding-top: 10px;

      > ul {
        display: flex;
        flex-wrap: wrap;
      }

      li {
        padding: 5px 10px;
        background-color: #F0F2F5;
        color: #686868;
        font-size: 12px;
        margin-right: 10px;
        margin-bottom: 10px;
      }

      > p {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #ccc;
        width: 100%;
      }
    }
  }
}
</style>

<!-- 解释1: 搜索的逻辑
  + 有一个搜索框

  + 逻辑1: 在搜索框内输入文本的时候
    => 使用的 input 事件实时更新
    => 拿到该关键字相关的内容, 以列表的形式展示
    => 注意: 此时不加入到搜索历史记录内

  + 逻辑2: 点击搜索按钮
    => 按照你输入的关键字跳转到 商品列表模块
    => 注意: 此时该搜索关键字进入到搜索历史记录内

  + 逻辑3: 点击垃圾桶
    => 清空搜索历史记录

  + 逻辑4:
    => 相关 搜索历史记录 和 热门搜索 都是可以点击的操作
    => 点击的时候也会去到列表页
    => 如果是热门搜索, 会进入历史记录

  + 逻辑5:
    => 如果你点击的是 搜索历史记录
    => 你当前点击的这个会被转换到历史记录的最前面一条

  + 配合 逻辑2 的实现
    => 点击搜索按钮的时候, 拿到搜索关键字
    => 跳转到 /list 路由
    => 来到 /list 路由以后, 在这个组件内
      -> 将 搜索关键字 直接渲染在 文本框里面
      -> 将 搜索关键字 添加在历史记录内
    => 问题: 历史记录在哪记忆
      -> 以数组的形式记录在 localStorage 内
      -> 因为关闭页面再次打开时候继续存在
-->
